<!DOCTYPE html>
<html lang= "zh" >
<head>
    <meta charset= "utf-8" >
    <meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
    <meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
    <title>Guestbook</title>
    <!-- Set render engine for 360 browser -->
    <meta name= "renderer" content= "webkit" >
    <!-- No Baidu Siteapp-->
    <meta http-equiv= "Cache-Control" content= "no-siteapp" />
    <link rel= "shortcut icon" href= "assets/i/favicon.ico" type="image/x-icon" >
    <link rel= "stylesheet" href= "assets/css/amazeui.min.css" >
    <link rel= "stylesheet" href= "assets/css/app.css" >
    <!-- umeditor css -->
    <link href= "ueditor/themes/default/css/ueditor.css" rel= "stylesheet" >
    <style>
        .title {
            text-align: center;
        }
        .chat-content-container {
            height: 40rem;
            overflow-y: scroll;
            border: 1px solid silver;
            /*width: 100%;*/
        }
    </style>
</head>
<body>
<!-- title start -->
<div class = "title" >
    <div class = "am-g am-g-fixed" >
        <div class = "am-u-sm-12" >
            <h1 class = "am-text-primary" >留言板</h1>
        </div>
    </div>
</div>
<!-- title end -->
<!-- chat content start -->
<div class = "chat-content" >
    <div class = "am-g am-g-fixed chat-content-container" >
        <div class = "am-u-sm-12" >
            <ul id= "message-list" class = "am-comments-list am-comments-list-flip" ></ul>
        </div>
    </div>
</div>
<!-- chat content start -->
<!-- message input start -->
<div class = "message-input am-margin-top" >
    <div class = "am-g am-g-fixed" >
        <div class = "am-u-sm-12" >
            <form class = "am-form" >
                <div class = "am-form-group" >
                    <script type= "text/plain" id= "myEditor" style= "width: 100%;height: 10rem;" ></script>
                </div>
            </form>
        </div>
    </div>
    <div class = "am-g am-g-fixed am-margin-top" >
        <div class = "am-u-sm-6" >
            <div id= "message-input-nickname" class = "am-input-group am-input-group-primary" >
                <span class = "am-input-group-label" ><i class = "am-icon-user" ></i></span>
                <input id= "nickname" type= "text" class = "am-form-field" placeholder= "匿名用户"/>
            </div>
        </div>
        <div class = "am-u-sm-6" >
            <button id= "send" type= "button" class = "am-btn am-btn-primary" >
                <i class = "am-icon-send" ></i> 发送
            </button>
        </div>
    </div>
</div>
<br>
<footer>
    <div align="center">
        <hr >
        <span><img src="gongan.png"><a style="color: #939393; font-size: 14px;">粤公网安备 44030702004049号 &nbsp;&nbsp;&nbsp;&nbsp;</a></span>
        <a style="color: #939393; font-size: 14px; font-style: italic; "> &copy; 2021 Galaxy &nbsp;</a>
        <a class="ali-report-link-text" href="https://beian.miit.gov.cn/" target="_blank" style="color: #939393; font-size: 14px;">粤ICP备2021085084号</a>
    </div>
</footer>
<script src= "assets/js/jquery.min.js" ></script>
<script charset= "utf-8" src= "ueditor/ueditor.config.js" ></script>
<script charset= "utf-8" src= "ueditor/ueditor.all.min.js" ></script>
<script src= "ueditor/lang/zh-cn/zh-cn.js" ></script>
<script>
   /* $( function () {

        var um = UE.getEditor( 'myEditor' );

    });*/

    var um = UE.getEditor( 'myEditor' );

    var socket = new WebSocket( 'wss://127.0.0.1:8081/wss/' ); // 更改为后端项目所在的IP地址端口

    // var socket = new WebSocket( ' ' );

    var isFirst = 1;
    socket.onopen = function (event) {
        addMessage(event.data);

    }

    socket.onmessage = function(event) {
        addMessage(event.data);

    };


    $( '#send' ).on( 'click' , function() {
        var nickname = $( '#nickname' ).val();

        if (!um.hasContents()) {

            um.focus();

            $( '.edui-container' ).addClass( 'am-animation-shake' );
            setTimeout( "$('.edui-container').removeClass('am-animation-shake')" , 1000 );
        }
        else {

            socket.send(JSON.stringify({
                content : um.getContent(),
                nickname : nickname
            }));

            um.setContent( '' );
        }
    })



    function addMessage(message) {
        var object = JSON.parse(message);

        if (isFirst == 1){

            for (var i in object) {
                var messageItem = '<li class="am-comment '
                    + (object[i]["isSelf"] ? 'am-comment-flip' : 'am-comment')
                    + '">'
                    + '<a href="javascript:void(0)" ><img src="assets/i/images/'
                    + (object[i]["isSelf"] ? 'self.jpg' : 'others.jpg')
                    + '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'
                    + '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'
                    + '<a href="javascript:void(0)" class="am-comment-author">'
                    + object[i]["nickname"] + '</a> <time>' + object[i]["date"]
                    + '</time></div></header>'
                    + '<div class="am-comment-bd">' + object[i]["content"]
                    + '</div></div></li>';
                $(messageItem).appendTo(' #message-list');

            }

            isFirst = 0;

            $(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);

        }
        else {

            message = JSON.parse(message);
            var messageItem = '<li class="am-comment '
                + (message.isSelf ? 'am-comment-flip' : 'am-comment')
                + '">'
                + '<a href="javascript:void(0)" ><img src="assets/i/images/'
                + (message.isSelf ? 'self.jpg' : 'others.jpg')
                + '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'
                + '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'
                + '<a href="javascript:void(0)" class="am-comment-author">'
                + message.nickname + '</a> <time>' + message.date
                + '</time></div></header>'
                + '<div class="am-comment-bd">' + message.content
                + '</div></div></li>';
            $(messageItem).appendTo('#message-list');

            $(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);
        }

    }

</script>
</body>
</html>